<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<style>
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    li {
        border: 1px solid #ddd;
        padding: 10px;
        margin: 5px 0;
        background-color: #f9f9f9;
    }

    li span {
        display: inline-block;
        width: 80px;
    }

    li span.id {
        font-weight: bold;
    }

    li span.name {
        color: #007bff;
    }

    li span.price {
        color: #28a745;
    }
</style>
<body>
<div id="app">
    <ul  v-if="cart.length != 0">
        <li v-for="item in cart">
            <span class="id">{{item.id}}</span>
            <span class="name">{{item.name}}</span>
            <span class="price">{{item.price}}</span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
    <p v-if="cart.length == 0">
        暂无数据
    </p>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            cart: [
                {id: '1', name: 'iphone', price: '1000'},
                {id: '2', name: 'macbook', price: '2000'},
                {id: '3', name: 'ipad', price: '3000'},
                {id: '4', name: 'Huawei', price: '4000'},
                {id: '5', name: 'Xiaomi', price: '5000'},
            ]
        },
        methods: {
            del(e){
                // this.cart.forEach(d=>{
                //     if(d.id == e){
                //         this.cart.splice(this.cart.indexOf(d),1) // 删除
                //     }
                // })
                this.cart = this.cart.filter((item) => item.id != e) // 过滤
            }
        }
    })
</script>